@if (userService.userState$ | async; as userData) {
  <div>
    <div class="rounded-xl overflow-hidden">
      <p-tabs [(value)]="activeTab" scrollable>
        <p-tablist>
          <p-tab [value]="SettingsTab.ReaderSettings">
            <i class="pi pi-book"></i> Reader
          </p-tab>
          <p-tab [value]="SettingsTab.ViewPreferences">
            <i class="pi pi-desktop"></i> View
          </p-tab>
          @if (userData.permissions.admin) {
            <p-tab [value]="SettingsTab.MetadataSettings">
              <i class="pi pi-sliders-h"></i> Metadata
            </p-tab>
            <p-tab [value]="SettingsTab.ApplicationSettings">
              <i class="pi pi-cog"></i> Application
            </p-tab>
            <p-tab [value]="SettingsTab.UserManagement">
              <i class="pi pi-users"></i> User
            </p-tab>
            <p-tab [value]="SettingsTab.EmailSettings">
              <i class="pi pi-envelope"></i> Email
            </p-tab>
            <p-tab [value]="SettingsTab.AuthenticationSettings">
              <i class="pi pi-lock"></i> Authentication
            </p-tab>
            <p-tab [value]="SettingsTab.Opds">
              <i class="pi pi-globe"></i> OPDS
            </p-tab>
          }
        </p-tablist>
        <p-tabpanels>
          <p-tabpanel [value]="SettingsTab.ReaderSettings">
            <app-reader-preferences></app-reader-preferences>
          </p-tabpanel>
          <p-tabpanel [value]="SettingsTab.ViewPreferences">
            <app-view-preferences-parent></app-view-preferences-parent>
          </p-tabpanel>
          @if (userData.permissions.admin) {
            <p-tabpanel [value]="SettingsTab.MetadataSettings">
              <app-metadata-settings-component></app-metadata-settings-component>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.ApplicationSettings">
              <app-global-preferences></app-global-preferences>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.UserManagement">
              <app-user-management></app-user-management>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.EmailSettings">
              <app-email></app-email>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.AuthenticationSettings">
              <app-authentication-settings></app-authentication-settings>
            </p-tabpanel>
            <p-tabpanel [value]="SettingsTab.Opds">
              <app-opds-settings></app-opds-settings>
            </p-tabpanel>
          }
        </p-tabpanels>
      </p-tabs>
    </div>
  </div>
}
